window.addEventListener("load", function () {
	// 轮播图
	var mySwiper = new Swiper(".swiper", {
		autoplay: true, //可选选项，自动滑动
		pagination: {
			el: ".swiper-pagination",
			clickable: true,
		},
	});

	//如果.你初始化时没有定义Swiper实例，后面也可以通过Swiper的HTML元素来获取该实例
	new Swiper(".swiper");
	var mySwiper = document.querySelector(".swiper").swiper;
	mySwiper.slideNext();

	// 第二部分 服务
	// 数据
	let apiService = [
		{
			img: "../img/service01.svg",
			title: "API私有化服务",
			introduce: "可部署本地&专有云的Web API",
		},
		{
			img: "../img/service02.svg",
			title: "源码云监测",
			introduce: "实时代码托管、威胁情报监控",
		},
		{
			img: "../img/service03.svg",
			title: "源码有赢",
			introduce: "一站式营销活动服务平台",
		},
		{
			img: "../img/service04.svg",
			title: "YuanMa API",
			introduce: "API开发者协作平台",
		},
	];
	// 遍历数据
	let serviceHtml = "";
	apiService.forEach(function (v) {
		// html结构
		serviceHtml += `<div>
		<img src=${v.img} alt="图片加载不成功" />
		<div>
			<h1>${v.title}</h1>
			<p>${v.introduce}</p>
			<p><a href="" class='fc-blue'>去搜索</a></p>
		</div>
	</div>`;
	});
	// 渲染到页面
	$("#something").innerHTML = serviceHtml;
	// 第三部分 api
	// 获取数据
	let APIdata = [
		{
			img: "../img/api01.svg",
			name1: "生活服务",
		},
		{
			img: "../img/api02.svg",
			name1: "金融科技",
		},
		{
			img: "../img/api03.svg",
			name1: "交通地理",
		},
		{
			img: "../img/api04.svg",
			name1: "充值缴费",
		},
		{
			img: "../img/api05.svg",
			name1: "数据智能",
		},

		{
			img: "../img/api06.svg",
			name1: "企业工商",
		},
		{
			img: "../img/api07.svg",
			name1: "应用开发",
		},
		{
			img: "../img/api08.svg",
			name1: "电子商务",
		},
		{
			img: "../img/apic2.svg",
			name1: "吃喝玩乐",
		},
		{
			img: "../img/apic1.svg",
			name1: "文娱视频",
		},
	];
	let apiHtml = "";
	// 遍历数据
	APIdata.forEach(function (v) {
		// html结构
		apiHtml += `<div>
		<img src=${v.img} alt="图片加载不成功" />
		<p>${v.name1}</p>
	</div>`;
	});
	// 渲染到页面
	$("#t2").innerHTML = apiHtml;

	// 主体第三部分--api区----移入与移出
	// 遍历
	let originUrl = "";
	$("#t2 div").forEach(function (v, i) {
		// api鼠标移入效果
		v.addEventListener("mouseover", function () {
			// 移入
			this.classList.add("bg-active");
			// 背景图换路径--路径对比.svg -c.svg
			// 获取路径
			let imgUrl = this.firstElementChild.src;
			// 获取路径后缀名
			let str = imgUrl.slice(imgUrl.lastIndexOf("."));

			// 截取并替换路径后缀
			this.firstElementChild.src = imgUrl.replace(str, "-c.svg");
			// 移出替换回去 用一个全局变量接变化前的url
			originUrl = imgUrl;
		});
		// 移出恢复
		v.addEventListener("mouseout", function () {
			// 给自身
			this.classList.remove("bg-active");
			this.firstElementChild.src = originUrl;
		});
	});

	// 慧集区 第四部分--实际命名是3
	let smartData = [
		{
			img: "../img/master-item-icon-01.svg",
			word: "API智能接入",
			introduce: "通过可视化界面配置，即可实现无代码、免开发快速接入",
		},
		{
			img: "../img/master-item-icon-02.svg",
			word: "数据库生成API",
			introduce: "无代码配置的方式将主流数据库输出为微服务API接口",
		},
		{
			img: "../img/master-item-icon-03.svg",
			word: "API智能构建",
			introduce: "多个API通过可视化的流程编排与业务逻辑重组，融合成新的API",
		},
		{
			img: "../img/master-item-icon-04.svg",
			word: "API智能路由",
			introduce: "根据入参属性进行智能分配，实现路由管理，控制API调用流向",
		},
		{
			img: "../img/master-item-icon-05.svg",
			word: "简化API开发",
			introduce: "助力开发者创建API、批量测试、跟踪开发进度、自动生成文档",
		},
		{
			img: "../img/master-item-icon-06.svg",
			word: "API开放共享",
			introduce:
				"将核心能力以API形式对外输出，赋能到多领域、多场景的应用程序中",
		},
	];
	let eventHtml = "";
	// 遍历
	smartData.forEach(function (v) {
		// 拼接html
		eventHtml += `
		<div>
		<h3>
			<img src=${v.img} />
			${v.word}
		</h3>
			<p>${v.introduce}</p>
			<p class="rectangle"></p>
		</div>`;
	});
	// 渲染
	$("#index3-event").innerHTML = eventHtml;
	// 遍历
	$("#index3-event div").forEach(function (v, i) {
		// 鼠标移入效果
		v.addEventListener("mouseover", function (v, i) {
			// 排除
			// 长条
			// 遍历
			$(".rectangle").forEach(function (v, i) {
				// 添加激活类
				v.classList.add("change1");
			});
		});
		// 移出恢复
		v.addEventListener("mouseout", function (v, i) {
			// 遍历
			$(".rectangle").forEach(function (v, i) {
				// 移出激活类
				v.classList.remove("change1");
			});
		});
	});

	// 第五部分---行业巨头--轮播图
	// 获取数据
	let iconData = [
		{
			img1: "../img/hcfc.png",
			img2: "../img/help-des-icon.svg",
			introduce:
				" 中国银联经过多年建设，可通过银联开放式综合支付服务平台，提供账单、订单、票券信息、行业场景等各类内容支付服务，但是传统的接口对接集成流程，存在API对接开发接入流程较复杂、技术对接沟通不便捷、产品覆盖面不足等痛点。通过聚合数据'APIMaster- 慧集'的产品能力，构建新一代开放式内容交换平台，将银联传统的内容支付服务从抽象的API接口转换为具象的内容商品，",
			name: "银联创新中心",
		},
		{
			img1: "../img/szyh.png",
			img2: "../img/help-des-icon.svg",
			introduce:
				"苏州银行在数仓建设过程中创建了新的数据模型，需要开放出去供外部系统调用。传统做法首先需要将数仓中的模型通过数据同步工具落地到目标数据库中，然后应用开发需要了解底层数据源细节，开发数据接口供调用，过程冗长复杂，难以维护，运维成本高。通过聚合数据API服务系统平台可从数据库直接生成相关的操作API，搭配前端页面即可使用，极大简化基础API 开发、维护工作。",
			name: "苏州银行开发部",
		},
		{
			img1: "../img/zhylian.png",
			img2: "../img/help-des-icon.svg",
			introduce:
				"河北幸福消金基于业务对三方数据的需求，需接入数百个外部数据源，涉及一百多个不同维度的数据供应商，通过代码开发对接众多接口，费时费力。通过聚合数据的三方数据管理平台，实现了完善的供应商管理、自动化测试、零代码数据源接入、数据质量管理、数据表现监控，从而保障各类信贷业务产品的风险控制正常运行，支撑公司消费贷款业务快速发展。",
			name: "风险管理部 ",
		},
	];
	let iconHtml = "";
	// 遍历
	iconData.forEach(function (v) {
		// html
		iconHtml += `<div class="f2-1 fe">
		<img src=${v.img1} alt="图片加载不成功" />
		<div>
			<img src=${v.img2} alt="图片加载不成功" />
			<p>
				${v.introduce}
			</p>
			<p id="right1">${v.name}</p>
		</div>
	</div>`;
	});
	// 渲染
	$("#icon").innerHTML = iconHtml;

	// 获取相关节点--轮播的
	const fourNodes = $(".f2-1");

	// 显示第一个
	fourNodes[0].style.opacity = "1";
	fourNodes[1].style.opacity = "0";
	fourNodes[2].style.opacity = "0";
	let index = 0;
	// 周期计时器-3s
	this.setInterval(function () {
		// 获取

		// 所有内容都不显示
		fourNodes.forEach(function (v) {
			v.style.opacity = "0";
		});
		// 索引显示对应内容
		fourNodes[index].style.opacity = "1";
		// 索引自增
		index++;
		// 索引最大归零
		if (index > fourNodes.length - 1) {
			index = 0;
		}
	}, 3000);
	// 第六部分--各企业图标
	let companyIconData = [
		{
			img: "../img/zgyidong.svg",
		},
		{
			img: "../img/zhaoshang.svg",
		},
		{
			img: "../img/meituan.svg",
		},
		{
			img: "../img/zgyinlian.svg",
		},
		{
			img: "../img/jingdong.svg",
		},
		{
			img: "../img/xiaomi.svg",
		},
		{
			img: "../img/douyin.svg",
		},
		{
			img: "../img/kuaishou.svg",
		},
	];
	let companyIconHtml = "";
	// 遍历
	companyIconData.forEach(function (v) {
		// html
		companyIconHtml += `<img src=${v.img} alt="图片加载不成" />`;
	});
	// 渲染
	$(".company").innerHTML = companyIconHtml;
	// 第六部分--证书
	let certificateData = [
		{
			img: "../img/security-logo-item01.svg",
			certificate: "高新技术企业",
		},
		{
			img: "../img/security-logo-item02.svg",
			certificate: "CMMI3",
		},
		{
			img: "../img/security-logo-item03.png",
			certificate: "ISO9001",
		},
		{
			img: "../img/security-logo-item04.png",
			certificate: "ISO20000",
		},
		{
			img: "../img/security-logo-item05.png",
			certificate: "ISO27001",
		},
		{
			img: "../img/security-logo-item06.png",
			certificate: "网络安全三级等保",
		},
	];
	let certificateHtml = "";
	// 遍历
	certificateData.forEach(function (v) {
		// html
		certificateHtml += `<div>
		<img src=${v.img} alt="图片加载不成" />
		<p>${v.certificate}</p>
	</div>`;
	});
	// 渲染
	$(".certificate").innerHTML = certificateHtml;
	// 返回顶部
	// 获取屏幕卷曲高度
	this.window.onscroll = function () {
		let height = window.scrollY;
		// 做判断
		if (height > 600) {
			$(".turn").style.display = "block";
			$(".turn").style.transform = "all 1s";
		} else {
			$(".turn").style.display = "none";
		}
	};
	// 点击事件
	$(".turn").addEventListener("click", function () {
		scroll({
			top: 0,
			left: 0,
			behavior: "smooth",
		});
	});
});
